<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="public/css/default.css"">
</head>

<body>
    <!-- import common header to reuse it -->
    <$ include header.html $>

    <div>
        <button onclick=" add()">增加Cookie</button>
    <button onclick="del()">删除Cookie</button>
    <button onclick="editor()">修改Cookie</button>
    <button onclick="show()">查看Cookie</button>
    </div>
    <h1>欢迎来到红浪漫~~</h1>
    <h2>现在由<$= id $>号技师，为你服务!</h2>
    <h3>你好，我是<$= name $>
            <$= age $>岁,专业技能是<$= skill $>
    </h3>
    <!-- variable(expressions)need to be show: use the  `<`$= variable $`>` (note there, the comment are not allow if they looks like a tag with a two angle bracket format to write;
        other control js statements just no need use `=` int the ejs template -->
    <br />
    我的技能如下：

    <ul>
        <$ for(var i=0;i<skills.length;i++){ $>
            <li>
                <$= skills[i] $>
            </li>
            <$}$>
    </ul>


    <!-- <h1>" I am jspang"</h1>
    <h2>welcome to the store</h2>
    <h3>
        hello,I am <$= name $>,<$= age $> year old<$=skill $>
                    < /h3> -->
    </body>
    <script>
        function add() {
            fetch("/add", {
                method: "post",
                headers: {
                    "Content-type": "application/json"
                }
            });
        }
        function del() {
            fetch("/del", {
                method: "post",
                headers: {
                    "Content-type": "application/json"
                }
            });
        }
        function editor() {
            fetch("/editor", {
                method: "post",
                headers: {
                    "Content-type": "application/json"
                }
            });
        }
        function show() {
            fetch("/show", {
                method: "post",
                headers: {
                    "Content-type": "application/json"
                }
            });
        }
    </script>

</html>